<script>
export default {
    name: "Layout"
}

</script>

<template>
    <div class="container">
        <ul class="menu">
            <li>
                <router-link to="/Admin/Lifecycle_options">选项式的生命周期</router-link>
            </li>
            <li>
                <router-link to="/Admin/Lifecycle_composition">组合式生命周期</router-link>
            </li>
            <li>
                <router-link to="/Admin/Lifecycle_ParentSon">父子组件生命周期钩子函数调用顺序</router-link>
            </li>
            <li>
                <router-link to="/Admin/ParentToSon">父子组件传值</router-link>
            </li>
            <li>
                <router-link to="/Admin/Brother">兄弟组件传值（事件总线）</router-link>
            </li>
            <li>
                <router-link to="/Admin/TransferValueDemo">事件总线案例</router-link>
            </li>
            <li>
                <router-link to="/Admin/TransferValueDemo02">父子案例</router-link>
            </li>
            <li>
                <router-link to="/Admin/refdemo">ref（选项式）</router-link>
            </li>
            <li>
                <router-link to="/Admin/refdemo02">ref（组合式）</router-link>
            </li>
            <li>
                <router-link to="/Admin/providerAndInject">跨级组件传值</router-link>
            </li>
            <li>
                <router-link to="/Admin/List">路由传参（params）</router-link>
            </li>
            <li>
                <router-link to="/Admin/List02">路由传参（query）</router-link>
            </li>
            
        </ul>
        <div class="content">
            <router-view></router-view>
        </div>
    </div>
</template>

<style lang="css" scoped>
.container {
    width: 100%;
    height: 100%;
    display: flex;
}

.menu{
    width: 200px;
    height: 100%;
    border-right: 1px solid #ccc;
}

.menu li{
    line-height: 40px;
    text-align: center;
}

.container .content {
    flex:1;
    height: 100%;
}


</style>
